<template>
	<a-layout-sider
			style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;">
		<div class="left-top">
			<div class="logoa1">
				<img src="../../../assets/images/generalDetection/detection.png"/>
			</div>
			<span>通用监测</span>
			<img src="../../../assets/images/generalDetection/addChart.png" style="margin-left:150px;margin-right:15px"/>
			<span style="color: white;">添加规则</span>
		</div>
		<div class="left-item">
			<span :style="active==1?'color: rgb(23,119,255)':''" @click="changePage(1)">互联网诈骗</span>
			<div style="width: 50%;display: flex;height:100%;margin-left:90px">
				<div class="search"></div>
				<div class="delete"></div>
				<div class="suspended"></div>
			</div>
		</div>
		<div class="left-item">
			<span :style="active==2?'color: rgb(23,119,255)':''" @click="changePage(2)">运营商网络安全</span>
		</div>
		<div class="left-item">
			<span :style="active==3?'color: rgb(23,119,255)':''" @click="changePage(3)">三大运营商在美退市</span>
		</div>
		<div class="left-item">
			<span :style="active==4?'color: rgb(23,119,255)':''" @click="changePage(4)">APP违法运行事</span>
		</div>
		<div class="left-item">
			<span :style="active==5?'color: rgb(23,119,255)':''" @click="changePage(4)">缴获黑卡70吨</span>
		</div>
		<div class="left-item">
			<span :style="active==6?'color: rgb(23,119,255)':''" @click="changePage(4)">运营商断卡涉案</span>
		</div>
		<div class="left-item">
			<span :style="active==6?'color: rgb(23,119,255)':''" @click="changePage(4)">物联网卡诈骗断卡</span>
		</div>
		<div class="left-item">
			<span :style="active==6?'color: rgb(23,119,255)':''" @click="changePage(4)">新型短信诈骗监测</span>
		</div>
	</a-layout-sider>
</template>

<script>
export default {
	name: "rootsleftindex",
	props: ["active"],
	data() {
		return {}
	},
	methods: {
		changePage(tag) {
			let path;
		}
	}
}
</script>

<style scoped lang="scss">
.addchart {
	background: url("../../../assets/images/generalDetection/addChart.png") left center no-repeat;
	width: 10%;
	height: 50%;
	margin-top: 6%;
}

.suspended {
	background: url("../../../assets/images/generalDetection/suspended.png") left center no-repeat;
	width: 12%;
	height: 100%;

}

.delete {
	background: url("../../../assets/images/generalDetection/delete.png") left center no-repeat;
	width: 12%;
	height: 100%;
}

.search {
	background: url("../../../assets/images/generalDetection/1.png") left center no-repeat;
	width: 12%;
	height: 100%;
	margin-left: 55%;
}

.left-top {
	height: 60px;
	font-size: 16px;
	display: flex;
	align-items: center;
	background-color: rgb(23, 119, 255);

	.logoa1 {
		margin: 0 25px 0 25px;
	}

	span {
		line-height: 60px;
		color: #ffffff;
	}
}

.left-item {
	height: 60px;
	font-size: 14px;
	display: flex;
	margin-left: 65px;
	align-items: center;

	span {
		cursor: pointer;
	}
}
</style>
